<head>
  <title>ATM Finder</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://hpneo.github.io/gmaps/gmaps.js"></script>
</head>

<body>
  <div class="header">
    <div class="container-fluid">
        <div class="row-fluid">
        {{> header}}
        </div>
    </div>
  </div>
  <div class="container-fluid">
  	<div class="row-fluid">
  		<div class="span3">
  			<div class="locations" id="locationDd">
          <div class="box">
            {{>locations}}
          </div>
  			</div>
        <div class="banks">
          <div class="box">
            {{>banks}}
          </div>
        </div>
  		</div><!-- end sidebar -->
  		<div class="span9">
  			<div class="map-render">
  				{{> maps}}
  			</div>
        <div class="street-guide">
          <ul id="instructions" class="intstructions">
          </ul>
        </div>
  		</div>
  	</div>
  </div>
  {{>search}}
</body>
<!-- Header -->
<template name="header">
  <div class="span3">
      <h2>ATM FINDER</h2>
  </div>
  <div class="span9">
    <div class="pull-left search-form">
       <input type="text" id="searchATM" class="input-xxlarge" placeholder="Find ATM here...">
    </div>
  </div>
</template>
<!-- Footer -->
<template name="footer">
</template>
<!-- Bank -->
<template name="banks">
  <h2>Banks <span></span></h2>
  <div class="content" id="bankContent">
  {{#if loading}}
     <div id="locations">Loading...</div>
  {{else}}
  	<ul class="bank-list">
      {{#each banks}}
        <li class="bank">
          <a href="#" data-toggle="tooltip" title="{{name}}">
            <img src="images/{{logo}}" alt="{{name}}" />
          </a>
        </li>
      {{/each}}
      
    </ul>

  {{/if}}
  </div>
  {{enableScrollbar}}
</template>
<!-- Location -->
<template name="locations">
    <h2 class="location-box-title">Locations <span></span></h2>
    <div class="content">
    {{#if loading}}
    <div id="locations">Loading...</div>
    {{else}}
    <ul class="location-list" id="locations">
       {{#each locations}} 
            <li class="location {{selected}}">
              <a class="location-name" href="/{{_id}}">{{name}}</a>
            </li>
       {{/each}}
      </select>
      {{/if}}
    </ul>
  </div>
</template>
<template name="maps">
  <div id="mapCanvas" class="map"></div>
</template>
<template name="search">
</template>